<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/static/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>班级基本信息</h5>
                </div>
                <div class="ibox-content">
                    <div <%--style="float: left"--%>style="margin-left: 5%">
                        <button onclick="aadClassInfo()" type="button" class="btn btn-primary">
                            <i class="fa fa-user-plus"></i>
                        </button>
                        <a onclick=" " href="" class="btn btn-primary "><i class="fa fa-refresh"></i></a>
                    </div>
                    <table class="table table-striped table-bordered table-hover " id=""
                           style="text-align: center;width: 90%;margin-left: 5%;margin-right: 5%">
                        <thead>
                        <tr>
                            <th style="width: 14%;text-align: center">班级ID号</th>
                            <th style="width: 14%;text-align: center">班级名字</th>
                            <th style="width: 14%;text-align: center">班级班主任</th>
                            <th style="width: 14%;text-align: center">班级创建时间</th>
                            <th style="width: 14%;text-align: center">开班计划人数</th>
                            <th style="width: 14%;text-align: center">班级现有人数</th>
                            <th style="width: 16%;text-align: center">操作</th>
                        </tr>
                        </thead>
                        <tbody class="table table-striped table-bordered table-hover" id="tb">

                        </tbody>

                    </table>
                    <div class="margin" style="margin-left: 5%">
                        每一页显示<select id="pageSizeSelect" onchange="onSelectChange()">
                        <option value="2">2</option>
                        <option value="5">5</option>
                        <option value="10">10</option>
                    </select> 条数据，
                        当前是第<span id="currentPageSpan"></span> 页，
                        总共<span id="totalPageSpan"></span> 页
                        <button class="button" onclick="firstPage()">首页</button>
                        <button class="button" onclick="prePage()">上一页</button>
                        <button class="button" onclick="nextPage()">下一页</button>
                        <button class="button" onclick="lastPage()">尾页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<%--添加班级模态框--%>
<div class="modal inmodal" id="addModal">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" onclick="clearData()" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span>
                </button>
                <i class="fa fa-book modal-icon"></i>
                <h4 class="modal-title">添加班级</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">班级名字</label>
                <input class="form-control" type="text" id="classNameInput" placeholder="请输入班级名字">

                <label class="control-label">主任专业ID</label>
                <input class="form-control" type="text" id="departmentIdInput" disabled="disabled">

                <label class="control-label">班级创建时间</label>
                <input class="form-control" type="date" id="creationTimeInput">
                <label class="control-label">开班计划人数</label>
                <input class="form-control" type="text" id="creatNumberInput" placeholder="请输入开班计划人数">
                <label class="control-label">班级状态</label>
                <input class="form-control" type="text" id="classDeletedInput" placeholder="请输入状态为1">



            </div>
            <div class="modal-footer">
                <button class="button btn-primary" onclick="clearData()">取消</button>
                <button class="button btn-primary" onclick="addClass()">确定</button>
            </div>
        </div>
    </div>
</div>

<%--分配班级班主任模态框--%>
<div class="modal inmodal" id="showHeadmasterInfo">
    <%--对话模态框--%>
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <button type="button" onclick="clearData()" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">关闭</span>
                </button>
                <i class="fa fa-book modal-icon"></i>
                <h4 class="modal-title">为该班级分配班主任</h4>
            </div>
            <div class="modal-body">
                <label class="control-label">班级ID</label>
                <input class="form-control" type="text" id="classIdInput">
                <label class="control-label">班级名字</label>
                <input class="form-control" type="text" id="classNameShow" placeholder="请输入班级名字">
                <label class="control-label">班级创建时间</label>
                <input class="form-control" type="date" id="creationTimeShow">

                <label class="control-label">班主任名字</label>
                <select class="form-control m-b" name="account" id="headmasterName">
                </select>

                <label class="control-label">开班计划人数</label>
                <input class="form-control" type="text" id="creatNumberShow" placeholder="请输入开班计划人数">
                <label class="control-label">班级现有人数</label>
                <input class="form-control" type="text" id="nowNumber" placeholder="请输入开班计划人数">


            </div>
            <div class="modal-footer">
                <button class="button btn-primary" onclick="updateHeadmaster()">确定</button>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Peity -->
<script src="${pageContext.request.contextPath}/static/js/plugins/peity/jquery.peity.min.js"></script>
<!-- 自定义js -->
<script src="${pageContext.request.contextPath}/static/js/content.js?v=1.0.0"></script>
<!-- iCheck -->
<script src="${pageContext.request.contextPath}/static/js/plugins/iCheck/icheck.min.js"></script>
<!-- Peity -->
<script src="${pageContext.request.contextPath}/static/js/demo/peity-demo.js"></script>

<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
    });
</script>


<script>
    $(function () {
        loadList();
    });

    //加载学生列表数据
    function loadList() {
        $.ajax({
            url: "${pageContext.request.contextPath}/classManagement/getClassInfoById",
            type: 'get',
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showList(result.classInfoList);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //显示学生信息
    function showList(classInfoList) {
        var html = '';
        for (var i = 0; i < classInfoList.length; i++) {
            var item = classInfoList[i];
            console.log(JSON.stringify(item));
            html += "<tr>";
            html += "<td> " + item.classId + "</td>";
            html += "<td>" + item.className + "</td>";
            html += "<td> " + item.headmasterName + "</td>";
            html += "<td> " + item.creationTime + " </td>";
            html += "<td> " + item.creatNumber + " </td>";
            html += "<td> " + item.studentNumber + " </td>";
            html += "<td><button class='btn btn-primary' onclick='updateHeadmasterInfo(\"" + item.classId + "\")'><i class=\"fa fa-edit\"></i></button>" +
               /* "&nbsp<button onclick='addHeadmasterInfo(\"" + item.className + "\")' class='btn btn-primary'><i class=\"fa fa-user-plus\"></i></button>" +*/
                "&nbsp<button onclick='deleteClassInfo(\"" + item.classId + "\")' class='btn btn-primary'><i class=\"fa fa-trash\"></i></button></td>";
            html += "</tr>";
        }
        $("#tb").html(html);
    }

    //在模态框里面显示主任的专业ID
    function aadClassInfo() {
        $.ajax({
            url: "${pageContext.request.contextPath}/classManagement/getDepartmentIdByUserId",
            type: 'get',
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    showClassInfo(result.departmentInfoList);
                } else {
                    alert(result.message);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    /*-------*/
    function showClassInfo(departmentInfoList) {
        if (departmentInfoList[0] != null) {
            $("#classNameInput").val("");
            $("#departmentIdInput").val(departmentInfoList[0].departmentId);
            $("#creationTimeInput").val("");
            $("#creatNumberInput").val(0);
            $("#classDeletedInput").val();
            $("#headmasterNameInput").val("");

          /*  $("#headmasterDeletedInput").val()
            $("#headmasterPhoneInput").val()
            $("#headmasterStateInput").val()*/
        } else {
            $("#classNameInput").val("");
            $("#departmentIdInput").val();
            $("#creationTimeInput").val("");
            $("#creatNumberInput").val();
            $("#classDeletedInput").val();
            $("#headmasterNameInput").val("");

           /* $("#headmasterDeletedInput").val()
            $("#headmasterPhoneInput").val()
            $("#headmasterStateInput").val()*/
        }
        $("#addModal").modal("show");
    }

    //添加班级数据传输
    function addClass() {
        var className = $("#classNameInput").val();
        var departmentId = $("#departmentIdInput").val();
        var creationTime = $("#creationTimeInput").val();
        var creatNumber = $("#creatNumberInput").val();
        var classDeleted = $("#classDeletedInput").val();
        var addData = {
            className: className,
            departmentId: departmentId,
            creationTime: creationTime,
            creatNumber: creatNumber,
            classDeleted: classDeleted,
        }
        $.ajax({
            url: "${pageContext.request.contextPath}/classManagement/addClassById",
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: addData,
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    parent.layer.msg("添加成功", {icon: 1, time: 2000});//成功提示
                    clearData()//关闭并清空模态编辑框
                    loadList();//刷新页面
                } else {
                    alert(result.message);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        })
    }


    function deleteClassInfo(classId) {
        $.ajax({
            url: "${pageContext.request.contextPath}/classManagement/deleteClassInfoByClassId",
            type: 'post',
            dataType: 'json',
            data: {
                "classId": classId,
            },
            success: function (result) {
                if (result.code == 0) {
                    //再次分页加载数据并显示在页面
                    parent.layer.msg("删除成功", {icon: 1, time: 2000});//成功提示
                    window.location.reload()
                } else {
                    alert(result.message);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        })
    }

    //拿到未分配的班主任显示在模态框中
    function updateHeadmasterInfo(classId) {

        clearData();
        $.ajax({
            url: "${pageContext.request.contextPath}/classManagement/getOneHeadmasterInfoByClassId",
            type: "post",
            dataType: "json",
            data:{"classId":classId},
            contentType: "application/x-www-form-urlencoded",
            success: function (result) {
                if (result.code == 0) {
                    //自动在模态框中显示值
                    console.log(JSON.stringify(result));
                    $("#classIdInput").val(result.classList[0].classId);
                    $("#classNameShow").val(result.classList[0].className);
                    $("#creationTimeShow").val(result.classList[0].creationTime);
                    $("#creatNumberShow").val(result.classList[0].creatNumber);
                    $("#nowNumber").val(result.classList[0].studentNumber);
                    for (var x in result.headmasterInfo){
                        $("#headmasterName").append("<option value="+result.headmasterInfo[x].headmasterId+">"+result.headmasterInfo[x].headmasterName+"</option>");
                    }
                    /*alert($("#headmasterName").val(result.classList[0].headmasterName))
                    if (result.classList[0].headmasterName != null){
                        $("#headmasterName").val(result.classList[0].headmasterName);
                    }*/
                    $('#showHeadmasterInfo').modal('show')
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        });
    }

    //为班级分配班主任
    function updateHeadmaster() {
        var classId = $("#classIdInput").val();
        var headmasterName = $("#headmasterName option:selected").text();
        var headmasterInfo= {
            classId: classId,
            headmasterName: headmasterName,
        }
        $.ajax({
            url: "${pageContext.request.contextPath}/classManagement/updateHeadmasterInfo",
            type: 'post',
            contentType: 'application/x-www-form-urlencoded',
            data: headmasterInfo,
            dataType: 'json',
            success: function (result) {
                if (result.code == 0) {
                    parent.layer.msg("分配成功", {icon: 1, time: 2000});//成功提示
                    clearData()//关闭并清空模态编辑框
                    window.location.reload()//刷新页面
                } else {
                    alert(result.message);
                }
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        })
    }

    //关闭模态框并清空模态框中的数据
    function clearData() {
        //分配班主任模态框清空
        $("#classIdInput").val("");
        $("#classNameShow").val("");
        $("#creationTimeShow").val("");
        $("#creatNumberShow").val("");
        $("#nowNumber").val("");
        $("#headmasterName").val("");

        //添加班级模态框清空
        $("#classNameInput").val("");
        $("#departmentIdInput").val("");
        $("#creationTimeInput").val("");
        $("#creatNumberInput").val("");
        $("#classDeletedInput").modal("hide");

    }

</script>
</body>
</html>
